import React, { Component } from 'react';
import { Form, Input, Select, DatePicker, Button } from 'antd';
const { Option } = Select;
const { RangePicker } = DatePicker;
import './index.scss';
export default class SearchHeader extends Component {

	state = {
		remoteLoading: false, // 远程搜索loading
		remoteOptions: [], // 远程搜索options
	}

	handleReset = () => {
		const { remoteLoading, remoteOptions, ...state } = this.state
		for (const key in state) {
			if (this.state.hasOwnProperty(key)) {
				this.setState({
					[key]: ''
				})
			}
		}
		this.props.handlerSearch({}, {})

	};

	setFormState = (key, value, type) => {
		this.setState({
			[key]: value
		})
	}

	handlerSearch = (item) => {
		const { remoteLoading, remoteOptions, ...state } = this.state
		this.props.handlerSearch(item, state)
	}

	// 远程搜索执行函数
	remoteMethod = (key) => {
		return (query) => {
			if (query !== '') {
				this.remoteLoading = true;
				this.setState({
					remoteLoading: true,
				})
				this.props.searchRemoteMethod(key, (options) => {
					this.setState({
						remoteLoading: false,
						remoteOptions: options
					})
				})
			} else {
				this.setState({
					remoteOptions: []
				})
			}
		};

	}

	render () {
		return (
			<Form layout={'inline'} className="search_header">
				{
					this.props.search.form.map(item => {
						// 模拟vue 插槽
						const ChildrenNode = this.props[item.key]
						if (ChildrenNode) {
							return <ChildrenNode {...item} />
						}
						if (item.type === 'text') {
							return (
								<Form.Item label={item.label} key={item.key}>
									<Input
										value={this.state[item.key]}
										onChange={(e) => this.setFormState(item.key, e.target.value, item.type)}
										allowClear
										placeholder={item.placeholder}
									/>
								</Form.Item>);
						} else if (item.type === 'select') {
							return (
								<Form.Item label={item.label} key={item.key}>
									{item.remote ?
										<Select
											showSearch
											loading={this.state.remoteLoading}
											value={this.state[item.key]}
											onChange={(value) => this.setFormState(item.key, value, item.type)}
											onSearch={this.remoteMethod(item.key)}
											className='form-item'
											style={{ width: 200 }}
											placeholder={item.placeholder}
										>
											{
												this.state.remoteOptions.map(item => {
													return (<Option key={item.value} value={item.value}>{item.label}</Option>);
												})
											}
										</Select> :
										<Select
											value={this.state[item.key]}
											onChange={(value) => this.setFormState(item.key, value, item.type)}
											className='form-item'
											style={{ width: 200 }}
											placeholder={item.placeholder}
										>
											{
												item.options.map(item => {
													return (<Option key={item.value} value={item.value}>{item.label}</Option>);
												})
											}
										</Select>}

								</Form.Item>);
						} else if (item.type === 'date') {
							return (
								<Form.Item label={item.label} key={item.key}>
									<DatePicker value={this.state[item.key]} format={'YYYY-MM-DD'} onChange={(date) => this.setFormState(item.key, date, item.type)}
										placeholder={item.placeholder} />
								</Form.Item>);
						} else if (item.type === 'daterange') {
							return (
								<Form.Item label={item.label} key={item.key}>
									<RangePicker value={this.state[item.key]} format={'YYYY-MM-DD'} onChange={(date) => this.setFormState(item.key, date, item.type)}
										placeholder={item.placeholder} />
								</Form.Item>);
						}

					})
				}
				<Form.Item>
					{
						this.props.search.operates.map((item, i) => {
							return (<Button style={{ marginLeft: 10 }} type={item.color} icon={item.icon} onClick={() => this.handlerSearch(item)} key={i} loading={item.type === 'search' ? this.props.search.loading : false}>{this.props.search.loading ? '查询中...' : item.name}</Button>)
						})
					}
					<Button style={{ marginLeft: 10 }} icon='minus-circle' onClick={this.handleReset}>重置</Button>
				</Form.Item>
			</Form>
		);
	}
}

